<template>
	<div class="system-role-container layout-padding">
		<div class="system-role-padding layout-padding-auto">
			<el-card shadow="hover" class="pageQueryBoxArea mb10">
				<el-form :model="state.param" :inline="true">
					<el-form-item label="门店类型：">
						<el-select v-model="state.param.mode" placeholder="请选择门店属性" class="w100" @change="modeChange()">
							<el-option v-for="item in state.query.storeType" :key="item.value"
								:label="item.label" :value="item.value" />
						</el-select>
					</el-form-item>
					<el-form-item label="门店状态：">
						<el-select v-model="state.param.storeStatus" placeholder="请选择门店状态" class="w100" @change="modeChange()">
							<el-option v-for="item in state.query.storeStatus" :key="item.value"
								:label="item.label" :value="item.value" />
						</el-select>
					</el-form-item>
					<el-form-item label="销售门店：">
						<el-select v-model="state.param.nodeId" placeholder="请选择门店" class="w100" @change="search()">
							<el-option v-for="item in state.query.storeList" :key="item.id" :label="item.name"
								:value="item.id" />
						</el-select>
					</el-form-item>
					<el-form-item label="还款类型：">
						<el-select v-model="state.param.repaymentType" placeholder="请选择门店属性" class="w100" @change="modeChange()">
							<el-option v-for="item in state.query.repaymentType" :key="item.value"
								:label="item.label" :value="item.value" />
						</el-select>
					</el-form-item>
					<el-form-item label="选择日期：">
						<el-date-picker v-model="state.param.dateTime" type="daterange" unlink-panels :shortcuts="shortcuts"
							format="YYYY/MM/DD" value-format="YYYY-MM-DD" range-separator="-" :disabled-date="disabledDate"
							start-placeholder="开始日期" end-placeholder="结束日期" />
					</el-form-item>
					<el-form-item label="年龄区间：" v-if="state.param.repaymentType == 4">
						<el-select v-model="state.param.age" placeholder="请选择年龄区间" class="w100" @change="modeChange()">
							<el-option v-for="item in state.query.age" :key="item.value"
								:label="item.label" :value="item.value" />
						</el-select>
					</el-form-item>
					<el-form-item label="性别：" v-if="state.param.repaymentType == 4">
						<el-select v-model="state.param.sex" placeholder="请选择年龄区间" class="w100" @change="modeChange()">
							<el-option v-for="item in state.query.sex" :key="item.value"
								:label="item.label" :value="item.value" />
						</el-select>
					</el-form-item>
					<el-form-item label="信息搜索：">
						<el-input v-model="state.param.keyword" placeholder="请输入关键字搜索" clearable></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="search()">
							<el-icon>
								<ele-Search />
							</el-icon> 搜 索
						</el-button>
						<el-button type="primary" @click="search()">
							<el-icon>
								<ele-Refresh />
							</el-icon> 重 置
						</el-button>
					</el-form-item>
				</el-form>
			</el-card>
			<el-card shadow="hover" v-loading="state.loading" style="display: flex;flex-direction: column;flex: 1;height: inherit;">
				<section style="flex: 1;display: flex;flex-direction: column; flex: 1;height: inherit;">
					<el-table :data="state.tableData" v-loading="state.loading" v-if="state.param.repaymentType == 1">
						<el-table-column type="index" label="ID" width="90" />
						<el-table-column label="门店">
							<template #default="scope">
								好店<span>{{ scope.row.id }}</span>
							</template>
						</el-table-column>
						<el-table-column label="类型">
							<template #default="scope">
								好店<span>{{ scope.row.id }}</span>
							</template>
						</el-table-column>
						<el-table-column label="状态">
							<template #default="scope">
								好店<span>{{ scope.row.id }}</span>
							</template>
						</el-table-column>
						<el-table-column sortable label="总计还款">
							<template #default="scope">
								好店<span>{{ scope.row.id }}</span>
							</template>
						</el-table-column>
						<el-table-column sortable label="销售还款">
							<template #default="scope">
								好店<span>{{ scope.row.id }}</span>
							</template>
						</el-table-column>
						<el-table-column sortable label="充值还款">
							<template #default="scope">
								￥<span>{{ scope.row.id }}</span>元
							</template>
						</el-table-column>
					</el-table>
					<el-table :data="state.tableData" v-loading="state.loading" v-if="state.param.repaymentType == 2">
						<el-table-column type="index" label="ID" width="90" />
						<el-table-column label="商品名称">
							<template #default="scope">
								好店<span>{{ scope.row.id }}</span>
							</template>
						</el-table-column>
						<el-table-column label="产品图片">
							<template #default="scope">
								好店<span>{{ scope.row.id }}</span>
							</template>
						</el-table-column>
						<el-table-column label="品牌">
							<template #default="scope">
								好店<span>{{ scope.row.id }}</span>
							</template>
						</el-table-column>
						<el-table-column label="商品类型">
							<template #default="scope">
								好店<span>{{ scope.row.id }}</span>
							</template>
						</el-table-column>
						<el-table-column sortable label="销售价格">
							<template #default="scope">
								好店<span>{{ scope.row.id }}</span>
							</template>
						</el-table-column>
						<el-table-column sortable label="订单金额">
							<template #default="scope">
								好店<span>{{ scope.row.id }}</span>
							</template>
						</el-table-column>
						<el-table-column sortable label="实付金额">
							<template #default="scope">
								好店<span>{{ scope.row.id }}</span>
							</template>
						</el-table-column>
						<el-table-column sortable label="欠款金额" >
							<template #default="scope">
								好店<span>{{ scope.row.id }}</span>
							</template>
						</el-table-column>
						<el-table-column sortable label="欠款率">
							<template #default="scope">
								好店<span>{{ scope.row.id }}</span>
							</template>
						</el-table-column>
						<el-table-column label="操作">
							<template #default="scope">
								<el-button   text type="primary" @click="onOpenEditRole()">
									客户名单
								</el-button>
							</template>
						</el-table-column>
					</el-table>
					<el-table :data="state.tableData" v-loading="state.loading" v-if="state.param.repaymentType == 3">
						<el-table-column type="index" label="ID" width="90" />
						<el-table-column label="卡项名称">
							<template #default="scope">
								好店<span>{{ scope.row.id }}</span>
							</template>
						</el-table-column>
						<el-table-column label="卡项图片">
							<template #default="scope">
								好店<span>{{ scope.row.id }}</span>
							</template>
						</el-table-column>
						<el-table-column label="属性">
							<template #default="scope">
								好店<span>{{ scope.row.id }}</span>
							</template>
						</el-table-column>
						<el-table-column label="规格">
							<template #default="scope">
								好店<span>{{ scope.row.id }}</span>
							</template>
						</el-table-column>
						<el-table-column sortable label="可用次数">
							<template #default="scope">
								好店<span>{{ scope.row.id }}</span>
							</template>
						</el-table-column>
						<el-table-column sortable label="可用时间">
							<template #default="scope">
								好店<span>{{ scope.row.id }}</span>
							</template>
						</el-table-column>
						<el-table-column sortable label="销售价格">
							<template #default="scope">
								好店<span>{{ scope.row.id }}</span>
							</template>
						</el-table-column>
						<el-table-column sortable label="订单金额">
							<template #default="scope">
								好店<span>{{ scope.row.id }}</span>
							</template>
						</el-table-column>
						<el-table-column sortable label="实付金额">
							<template #default="scope">
								好店<span>{{ scope.row.id }}</span>
							</template>
						</el-table-column>
						<el-table-column sortable label="欠款金额" >
							<template #default="scope">
								好店<span>{{ scope.row.id }}</span>
							</template>
						</el-table-column>
						<el-table-column sortable label="欠款率">
							<template #default="scope">
								好店<span>{{ scope.row.id }}</span>
							</template>
						</el-table-column>
						<el-table-column label="操作">
							<template #default="scope">
								<el-button   text type="primary" @click="onOpenEditRole()">
									客户名单
								</el-button>
							</template>
						</el-table-column>
					</el-table>
					<el-table :data="state.tableData" v-loading="state.loading" v-if="state.param.repaymentType == 4">
						<el-table-column type="index" label="ID" width="90" />
						<el-table-column label="门店名称">
							<template #default="scope">
								好店<span>{{ scope.row.id }}</span>
							</template>
						</el-table-column>
						<el-table-column label="客户姓名">
							<template #default="scope">
								好店<span>{{ scope.row.id }}</span>
							</template>
						</el-table-column>
						<el-table-column label="性别">
							<template #default="scope">
								好店<span>{{ scope.row.id }}</span>
							</template>
						</el-table-column>
						<el-table-column label="年龄">
							<template #default="scope">
								好店<span>{{ scope.row.id }}</span>
							</template>
						</el-table-column>
						<el-table-column label="手机号">
							<template #default="scope">
								好店<span>{{ scope.row.id }}</span>
							</template>
						</el-table-column>
						<el-table-column  label="客户等级">
							<template #default="scope">
								好店<span>{{ scope.row.id }}</span>
							</template>
						</el-table-column>
						<el-table-column sortable label="订单金额">
							<template #default="scope">
								好店<span>{{ scope.row.id }}</span>
							</template>
						</el-table-column>
						<el-table-column sortable label="实付金额">
							<template #default="scope">
								好店<span>{{ scope.row.id }}</span>
							</template>
						</el-table-column>
						<el-table-column sortable label="欠款金额">
							<template #default="scope">
								好店<span>{{ scope.row.id }}</span>
							</template>
						</el-table-column>
						<el-table-column label="操作">
							<template #default="scope">
								<el-button   text type="primary" @click="onOpenEditRole()">
									欠款详情
								</el-button>
							</template>
						</el-table-column>
					</el-table>
					<el-row justify="end">
						<el-col :span="24" class="flex-end-center">
							<el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" class="mt15"
								:pager-count="5" :page-sizes="[10, 20, 30]" v-model:current-page="state.param.pageNum" background
								v-model:page-size="state.param.pageSize" layout="total, sizes, prev, pager, next, jumper"
								:total="state.total">
							</el-pagination>
						</el-col>
					</el-row>
				</section>
			</el-card>
		</div>
		<customListDialog ref="customListDialogRef" />
		<productListDialog ref="productListDialogRef" />
	</div>
</template>

<script setup lang="ts" name="saleIndex">
import { reactive,onMounted,ref,defineAsyncComponent} from 'vue';
import { useRouter } from 'vue-router';
import { orderQuery, storeNodeList, channelList, orderAddNote, orderCancel } from '/@/api/order';
import { specificationList } from '/@/api/commodity';
import { ElMessageBox, ElMessage, TabsPaneContext } from 'element-plus';
// 引入组件

// 引入组件
const customListDialog = defineAsyncComponent(() => import('/@/views/statistical/arrears/components/customListDialog.vue'));
const productListDialog = defineAsyncComponent(() => import('/@/views/statistical/arrears/components/productListDialog.vue'));
const router = useRouter();
// 定义变量内容
const customListDialogRef = ref();
const productListDialogRef = ref();
const state = reactive({
	param: {
		source: null, // 0 门店 2 线上 //设置不了得值是哪个？
		mode: null, // 门店类型  null(默认) 全部 0 直营  1 加盟
		storeStatus:-1 ,
		nodeId: null, // 门店id
		repaymentType: 1, // 欠款类型
		age: -1,
		sex: -1,
		status: null,
		payType:null,
		dateTime: [],
		startTime: "",// 开始时间
		endTime: "",// 结束时间 
		timeInterval: 3, // 默认 null  时间范围  0 本月 1 本季度  2 今年  3 自定义时 须 startTime 和 endTime 时间可为null
		keyword: "",
		type: 1, 
		pageNum: 1,
		pageSize: 10,
	},
	query: {
		orderSource: [
			{ value: null, label: '全部' },
			{ value: 0, label: '门店订单' },
			{ value: 2, label: '线上订单' }
		],
		storeType: [
			{ value: null, label: '全部' },
			{ value: 0, label: '直营' },
			{ value: 1, label: '加盟' }
		],
		storeStatus:[
			{ value: -1, label: '全部' },
			{ value: 1, label: '正常' },
			{ value: 2, label: '闭店' },
			{ value: 3, label: '休息' }
		],
		age:[
			{ value: -1, label: '全部' },
			{ value: 0, label: '17岁以下' },
			{ value: 1, label: '18-24岁' },
			{ value: 2, label: '25-29岁' },
			{ value: 3, label: '30-34岁' },
			{ value: 3, label: '35-40岁' },
			{ value: 3, label: '40-44岁' },
			{ value: 3, label: '45-49岁' },
			{ value: 3, label: '50-54岁' },
			{ value: 3, label: '55岁以上' },
			{ value: 3, label: '未知' },
		],
		sex:[
			{ value: -1, label: '全部' },
			{ value: 1, label: '男' },
			{ value: 2, label: '女' },
			{ value: 3, label: '未知' },
		],
		storeList: [] as Array<any>,
		saleChannel: [
			{ value: 1, label: '经营报表' },
			{ value: 2, label: '服务消耗报表' },
			{ value: 3, label: '新客户报表' }
		], 
		orderStatus: [
			{ value: null, label: '全部' },
			{ value: 0, label: '待支付/到店付' },
			{ value: 1, label: '待发货' },
			{ value: 7, label: '待收货/待核销' },
			{ value: 8, label: '待评价' },
			{ value: 4, label: '已完成' },
			{ value: 11, label: '退款中' },
			{ value: 10, label: '已退款' },
			{ value: 6, label: '已关闭' },
			{ value: 14, label: '已撤销' },
		],
		payType: [
			{ value: null, label: '全部' },
		],
		orderType:[
			{ value: 999, label: '全部订单' },
		],
		repaymentType:[
			{ value: 1, label: '还款统计' },
			// { value: 2, label: '欠款产品' },
			// { value: 3, label: '欠款卡项' },
			// { value: 4, label: '欠款客户' },
		]
	},
	loading: false,
	total: 0,
	tableData: [{
		id:1,
		name:'test'
	},{
		id:1,
		name:'test'
	},{
		id:1,
		name:'test'
	},{
		id:1,
		name:'test'
	}]
});


const shortcuts = [
	{
		text: '本月',
		value: () => {
		const end = new Date()
		const start = new Date()
		start.setTime(start.setDate(1))
		return [start, end]
		},
	},
	{
		text: '近一个月',
		value: () => {
		const end = new Date()
		const start = new Date()
		start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
		return [start, end]
		},
	},
	{
		text: '近三个月',
		value: () => {
		const end = new Date()
		const start = new Date()
		start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
		return [start, end]
		},
	},
	{
		text: '近半年',
		value: () => {
		const end = new Date()
		const start = new Date()
		start.setTime(start.getTime() - 3600 * 1000 * 24 * 180)
		return [start, end]
		},
	},
	{
		text: '近一年',
		value: () => {
		const end = new Date()
		const start = new Date()
		start.setTime(start.getTime() - 3600 * 1000 * 24 * 365)
		return [start, end]
		},
	},
]

onMounted(() => {
	// 获取订单列表
	getOrderList();
	// 获取门店列表
	getStoreNodeList();
})

const disabledDate = (time: Date) => {
  return time.getTime() > Date.now()
}

// 获取订单列表
const getOrderList = async () => {
	state.loading = true;//不用传参， 请求得入参在上面都定义了 param这里吗？
	// 对
	const { results } = await specificationList(state.param);
	state.loading = false;
	state.tableData = results.records;
	state.total = results.total;
}

// 搜索
const search = () => {
	console.log(state.param)
	if (state.param.dateTime?.length == 2) {
		state.param.startTime = state.param.dateTime[0]
		state.param.endTime = state.param.dateTime[1]
	}
	state.param.pageNum = 1;
	getOrderList()
}


/**
 * 获取门店列表
 * mode  null /全部   0直营  1加盟
 */
const getStoreNodeList = async () => {
	const { results } = await storeNodeList({ mode: null, current: 1, size: 50 });
	let no1 = [{id:null,name:'全部'}]
	state.query.storeList = [...no1, ...results.records];
}

const handleClick = (tab: TabsPaneContext) => {
	let select = tab.props.name
	if (select != state.param.type) {
		state.param.pageNum = 1;
		state.param.type = select! as any;  //赋值 赋值是 + select!?  + 代表把字符串转为数字  ！ 是TS里面非空符号
		getOrderList();
	}
}


// 订单详情
const onOpenEditRole = (item?: any) => {
	if(state.param.type != 4){
		customListDialogRef.value.openDialog();
	// }else if(state.param.type == 2){
		// employeeListDialogRef.value.openDialog();
	}else if(state.param.type == 4){
		productListDialogRef.value.openDialog();
	}
};

const changeType = ()=> {
	changeType
}


// 分页点击 条数
const onHandleSizeChange = (val: number) => {
	state.param.pageSize = val;
	getOrderList();
};
// 分页点击
const onHandleCurrentChange = (val: number) => {
	state.param.pageNum = val;
	getOrderList();
};

// 添加备注
const addNote = (snkey: String) => {
	ElMessageBox.prompt(`商家备注`, '备注', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		inputPattern: /^.+$/,
		inputErrorMessage: '请输入备注',
	}).then(async ({ value }) => {
		let params = {
			snkey: snkey,
			note: value
		}
		let res = await orderAddNote(params);
		console.log(res)
		getOrderList();
		ElMessage.success('添加成功');
	}).catch(() => {
		ElMessage({
			type: 'info',
			message: '已取消',
		})
	})
}

// 撤销订单
const onRevokeOrder = (id: number, index: number) => {
	ElMessageBox.prompt(
		`您现在操作的是撤销订单，请慎重;该操作会使订单无效，同时用户消费数据、员工业绩、商品销量等相关数据均会撤销（恢复为之前的状态或数据）; 是否继续?`, '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
		inputPattern: /^.+$/,
		inputErrorMessage: '请输入订单撤销原因',
	}).then(async ({ value }) => {
		let params = {
			id: id,
			reason: value
		}
		let res = await orderCancel(params);
		console.log(res)
		state.tableData[index].status = '已撤销'
		ElMessage.success('撤销成功');
	}).catch(() => {
		ElMessage({
			type: 'info',
			message: '已取消',
		})
	})
};
 
// 订单改价
const changePrice = async ( item: any) => {
	// changePriceDialogRef.value.openDialog(item);
}

// 订单发货
const deliverFun = (item: any) => {
	// deliverGoodDialogRef.value.openDialog(item);
}


// 销售员工过滤器
const rebateListFilters = (item: any) => {
	let arr = item[0].rebateList
	if (Array.isArray(arr)) {
		let newArr = arr.map((obj: { id: any, employee: any, money: any; }) => obj.employee);
		let uniqueArr = [...new Set(newArr)];
		return uniqueArr.join('、')
	} else {
		return '--'
	}
}

// 来源切换
const sourceChange = async () => {
	state.param.mode = null;
	state.param.nodeId = null;
	state.param.channel = null;
	state.param.status = null;
	state.param.type = 999;
    getChannelList();
	if(state.param.source == null){
		state.query.orderStatus =  [
			{ value: null, label: '全部' },
			{ value: 0, label: '待支付/到店付' },
			{ value: 1, label: '待发货' },
			{ value: 7, label: '待收货/待核销' },
			{ value: 8, label: '待评价' },
			{ value: 4, label: '已完成' },
			{ value: 11, label: '退款中' },
			{ value: 10, label: '已退款' },
			{ value: 6, label: '已关闭' },
			{ value: 14, label: '已撤销' },
		];
		state.query.orderType = [
			{ value: 999, label: '全部订单' }
		];
	}else if(state.param.source == 0){
		state.query.orderStatus =  [
			{ value: null, label: '全部' },
			{ value: 1, label: '待支付' },
			{ value: 6, label: '退款中' },
			{ value: 7, label: '已退款' },
			{ value: 8, label: '已关闭' },
			{ value: 9, label: '已撤销' },
		];
		state.query.orderType = [
			{ value: 999, label: '全部订单' },
			{ value: 1, label: '销售订单' },
			{ value: 2, label: '充值订单' },
			{ value: 9, label: '储值卡订单' },
			{ value: 11, label: '活动订单' },
			{ value: 19, label: '付费会员订单' },
			{ value: 20, label: '换卡订单' },
			{ value: 7, label: '退款订单' },
		];
	}else if(state.param.source == 2){
		state.query.orderStatus =  [
			{ value: null, label: '全部' },
			{ value: 1, label: '待支付/到店付' },
			{ value: 2, label: '待发货' },
			{ value: 4, label: '待收货/待核销' },
			{ value: 4, label: '待评价' },
			{ value: 5, label: '已完成' },
			{ value: 6, label: '退款中' },
			{ value: 7, label: '已退款' },
			{ value: 8, label: '已关闭' },
		];
		state.query.orderType = [
			{ value: 999, label: '全部订单' },
			{ value: 23, label: '普通订单' },
			{ value: 25, label: '秒杀订单' },
			{ value: 26, label: '拼团订单' },
			{ value: 24, label: '砍价订单' },
			{ value: 28, label: '直播订单' },
			{ value: 27, label: '预定订单' },
			{ value: 29, label: '付费会员订单' },
		];
	}
	getOrderList();
}

// 门店类型切换 (如果不是全部则清空选中门店 以及订单选中状态)
const modeChange = () => {
	if(state.param.mode != null){
		state.param.nodeId = null
		state.param.status = null
	}
}
</script>
<style scoped lang="scss">
:deep(.el-card__body){
	display: flex;
	flex-direction: column;
	flex: 1;
	height: inherit;
	.el-table{
		flex: 1;
		.el-table__inner-wrapper::before{
			background: none !important;
		}
	}
}
</style>